<template>
	<view class="pages">
		<view class="search_warp">
			<u-tabs :list="tab_list" @click="click" :current="current" :itemStyle="{height:'92rpx',fontSize:'28rpx'}" lineColor="#FF7612" lineWidth="40" lineHeight="6" :activeStyle="{color:'#FF7612'}"></u-tabs>
		</view>
		<view class="item_warp">
			<text class="count">已推荐次数：{{count}}</text>
			<view class="item u-flex-between u-flex"v-for="(item,index) in tab_list[current].proData" :key="index" @click="skip(item)">
				<view class="avatar">
					<image :src="get_src(item.matchmakerMeitu)"></image>
				</view>
				<view  class="u-flex-1" >
					<view class="u-flex u-flex-between item_top">
						<view class="u-flex-y-center">
							<text>{{item.userId}}</text>
							<view class="sex">
								<image :src="`${$http_cos}${item.sex=='男'?'/static/boy':'/static/%E5%A5%B3'}.png`" mode="heightFix"></image>
							</view>
						</view>
						<text>“{{item.descriptiveDescription}}”</text>
					</view>
					<view class="info_introduce">
						<text>
							{{item.title}}
						</text>
					</view>
				</view>
				
			</view>　
			<u-empty
			v-if="tab_list[current].proData.length==0"
			textSize='30'
			        mode="data"
					width="200"
					height="200"
					icon="https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/%E6%95%B0%E6%8D%AE%E4%B8%BA%E7%A9%BA.png"
			>
			</u-empty>
		</view>
		
	</view>
</template>

<script>
import { getUserRecommendList,inappropriate} from '@/common/api.js'
import COS from 'cos-js-sdk-v5'
	export default {
		data() {
			return {
				page:1,
				Collect_list:[],
				perPage:10,
				count:0,
				tab_list:[{name:'待处理',id:1,proData:[],page:1,perPage:10},{name:'历史推荐',id:2,proData:[],page:1,perPage:10}],
				current:0
			}
		},
		onUnload() {
			uni.$off('refresh')
		},
		onLoad(option) {
			if(option.current){
				this.current=1
			}
			this.init()
		},
		onShow(){
			uni.$on('refresh', (data) => { 
				if (data.refresh) {
					this.tab_list[0].proData=[]
					this.tab_list[0].page=1
				}
			})
		},
		click(e){
			if(e.index==this.current)return;
			this.current=e.index
			let	list=this.tab_list[this.current]
			if(list.proData.length>0){
				return
			}
			this.init()
		},
		onReachBottom() {
			this.init()
		},
		methods: {
			click(e){
				if(e.index==this.current)return;
				this.current=e.index
				let	list=this.tab_list[this.current]
				if(list.proData.length>0){
					return
				}
				this.init()
			},
			init(){
				let	list=this.tab_list[this.current]
				
				setTimeout(()=>{
					this.get_list()
				},200)
			},
			skip(item){
				uni.navigateTo({
					url:'/pagesA/square_details/index?id='+item.userId+'&name='+this.tab_list[this.current].name
				})
			},
			get_src(it){
				let {url}=JSON.parse(it)[0]
				return url+'?imageView2/2/w/750/h/q/85'
			},
			 get_list(it){
			 	let	list=this.tab_list[this.current]
			 	let data = {
			 		params:{
			 			status:this.current,
			 			page:list.page,
			 			perPage:list.perPage
			 		}
			 	}
			 	getUserRecommendList(data, {
			 		custom: {
			 			auth: false,
			 			toast: false,
			 			catch: false
			 		}
			 	}).then((result) => {
			 		list.proData= [...list.proData, ...result.list]
			 		
			 		this.count=result.total
			 		if (result.list.length > 0) {
			 			list.page++
			 		}
			 		let it=this.tab_list.filter((item,index)=>{
			 				if(item.id==result.id){
			 					item.list=list
			 					item.count=result.count
			 				}
			 				return item
			 			})
			 			this.tab_list=it
			 	}).catch((err) => {
			 	
			 	})
			 },
			
		}
	}
</script>

<style lang="scss">
	.pages{
		// padding:24rpx;
		box-sizing: border-box;
		.search_warp {
			// padding: 0rpx 10rpx;
			box-sizing: border-box;
			background-color: #fff;
			// height: 176rpx;
			/deep/ .u-tabs__wrapper__nav__item{
				flex: 1;
				padding:0;
				
				&__text{
					font-size:28rpx;
				}
				
			}
			/deep/ .u-tabs__wrapper__nav__line{
					left:5rpx;
				}
		}
		.item_warp{
			padding:0 24rpx;
			box-sizing: border-box;
			.count{
				padding:24rpx 0 23rpx;
				box-sizing: border-box;
				font-size: 30rpx;
				color: #000000;
			}
		}
		.item{
			padding:24rpx 20rpx;
			background-color: #fff;
			border-radius:10rpx;
			margin-bottom:24rpx;
			.avatar{
				width: 184rpx;
				height:232rpx;
				border-radius:10rpx;
				overflow: hidden;
				margin-right: 24rpx;
				// background-color:red;
			}
			.item_top{
				padding:9rpx 5rpx 9rpx 0;
				box-sizing: border-box;
				text{
					font-weight: 400;
					&:first-child{
						font-size:34rpx; ;
						color: #000000;
					}
					&:last-child{
						color: #FF7612;
						font-size: 28rpx;
					}
				}
				.sex{
					width:auto;
					height:28rpx;
					margin-left: 8rpx;
				}
			}
			.info_introduce{
				text{
					line-height:42rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #111111;
					overflow:hidden;
					text-overflow:ellipsis;
					display:-webkit-box;
					-webkit-box-orient:vertical;
					-webkit-line-clamp:4;
					letter-spacing:30;
				}
			}
			
		}
	}
	
	
</style>
